<template>
	<view class="pages">

		<view class="items b" style="margin-top: 64rpx;" @click="$next('/pages/Profile/Language')">
			<view class="itemsLeft">
				{{$t('setting.Language')}}
			</view>
			<view class="itemsRight">
				<image src="../../static/right.png" mode=""
					style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;"> </image>
			</view>
		</view>
		<view class="items b" @click="$next('/pages/Profile/ChangePassword')">
			<view class="itemsLeft">
				{{$t('setting.ChangePasswordtps')}}
			</view>
			<view class="itemsRight">
				<image src="../../static/right.png" mode=""
					style="width: 18rpx;height: 30rpx;right: 0rpx;margin-top: 3rpx;"> </image>
			</view>
		</view>
		<view class="items b" @click="modelDel">
			<view class="itemsLeft">
				{{$t('setting.DeleteAccount')}}
			</view>
		</view>
		<view class="btn" @click="out">
			{{$t('setting.LogOut')}}
		</view>
		<!-- 		<u-modal :show="deleteAccountshow" :title="$t('modelTitle')" :content="$t('modelContent')"
			showCancelButton="true" showConfirmButton="true" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"
			@cancel="deleteAccountCancel" @confirm="deleteAccountConfirm"></u-modal> -->
		<u-popup :show="deleteAccountshow" mode="center" :round="20" style="height: 600rpx;">
			<view class="modelBox">
				<view class="modelBox_hedaer">
					{{$t('modelTitle')}}
				</view>
				<view class="modelBox_center">
					{{$t('modelContent')}}<span v-if="timeNum > 0" style="color: #ccc;">({{timeNum}})</span>
				</view>
				<view class="modelBox_footer">
					<u-button :text="$t('Cancel')"
						:customStyle="{height:'100rpx',padding:'0',margin:'0',color:'#606266',fontSize:'32rpx'}"
						@click="deleteAccountCancel"></u-button>
					<u-button :text="$t('Confirm')"
						:customStyle="{height:'100rpx',padding:'0',margin:'0',color:'#2979ff',fontSize:'32rpx'}"
						@click="deleteAccountConfirm" :disabled="timeNum > 0"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeNum: 10,
				timer: null,
				deleteAccountshow: false,
			}
		},
		methods: {
			modelDel() {
				this.deleteAccountshow = true
				this.setTime()
			},
			setTime() {
				this.timer = setInterval(() => {
					if (this.timeNum > 0) {
						this.timeNum--;
					} else {
						clearInterval(this.timer)
					}

				}, 1000)
			},
			// 取消删除
			deleteAccountCancel() {
				this.deleteAccountshow = false
				setTimeout(() => {
					this.timeNum = 10
				}, 1000)
				clearInterval(this.timer)
			},
			// 确认删除账号
			deleteAccountConfirm() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$post(`/biz/app/deleteUser`, {
					id:JSON.parse(uni.getStorageSync('user')).id
				}, 0).then(res => {
					if (res.status) {
						this.$ToastOk(this.$t('actionSucceeded'))
						this.deleteAccountshow = false
						setTimeout(() => {
							this.timeNum = 10
							uni.setStorageSync('userInfo','')
							// uni.setStorageSync('token','')
							uni.setStorageSync('user','')
							uni.reLaunch({
								url:'/pages/index/login/login'
							})
						}, 1000)
						clearInterval(this.timer)
					} else {
						this.$ToastFail(`${res.message}`)
						clearInterval(this.timer)
					}
				})
			},
			// 提交
			out() {
				uni.setStorageSync('token', '')
				setTimeout(() => {
					uni.reLaunch({
						url: '../index/login/login',
					})
				}, 1000)
			}
		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		/* padding: 0 26rpx; */
		box-sizing: border-box;
		background-color: #F0F0F0;
		padding-bottom: 60rpx;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 104rpx;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.itemsLeft {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* background-color: red; */
		width: 500rpx;
	}

	.itemsRight {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.itemsRight span {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 450;
		letter-spacing: 0.20000000298023224px;
		text-align: right;
		color: #808080;
		margin-right: 10rpx;
	}

	.items span {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin-left: 10rpx;

	}

	.b {
		border-bottom: 2rpx solid #eee;
	}

	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #fff;
		margin: 50px auto 0rpx;
		color: red;
		font-weight: 700;
	}

	.btn:active {
		background-color: #ccc;
	}

	.modelBox {
		width: 690rpx;
		height: 510rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.modelBox_hedaer {
		width: 100%;
		height: 110rpx;
		line-height: 167rpx;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #606266;
	}

	.modelBox_center {
		text-indent: 2rem;
		width: 100%;
		height: 380rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #606266;

	}

	.modelBox_footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		/* border-top: 2rpx solid #eee; */
		box-sizing: border-box;
		font-size: 32rpx;
		color: #606266;
		background-color: #fff;
		border-radius: 10rpx;
		border-top-left-radius: 0%;
		border-top-right-radius: 0%;
		overflow: hidden;
	}
</style>